<template>
  <div>
    <a-button size="small" type="primary" @click="addBtnClick(true)">
      添加
    </a-button>
    <br>
    <br>
    <a-table :columns="columns" :data-source="models" bordered row-key="_id">
      <template slot="group" slot-scope="_,item">
        <a-tag v-if="item.group" color="pink">
          组
        </a-tag>
        <a-popover v-else :title="item.type">
          <template slot="content">
            <span>{{ item.path }}</span>
          </template>
          <a-tag color="red">
            API
          </a-tag>
        </a-popover>
      </template>
      <template slot="action" slot-scope="_,item">
        <a-button v-if="item.group" type="link" size="small" @click="addBtnClick(false, item)">
          添加
        </a-button>
        <a-button type="link" size="small" @click="modifyBtnClick(item)">
          修改
        </a-button>
        <a-button type="link" size="small" @click="removeBtnClick(item)">
          删除
        </a-button>
      </template>
    </a-table>
    <w-add ref="WAdd" @reload="loadList" />
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Admin } from '@/config/api'
import WAdd from '@/components/admin/auth/api/add'
import WSubCell from '@/components/admin/auth/api/subCell'

const dealWithChildren = (list: Array<any>) => {
  list.forEach((item) => {
    if (item.group) {
      dealWithChildren(item.children)
    } else {
      item.children = null
    }
  })
}

@Component({
  name: 'AdminAuthApi',
  layout: 'admin',
  components: {
    WAdd,
    // eslint-disable-next-line vue/no-unused-components
    WSubCell
  },
  async asyncData ({ app }) {
    const { $wAxios } = app
    const data = await $wAxios.$get(Admin.auth.api.all)
    dealWithChildren(data)
    return { models: data }
  },
  head () {
    return {
      title: 'API权限'
    }
  }
})
export default class AdminAuthApi extends Vue {
  models!: any;
  columns = [
    {
      title: '标题',
      dataIndex: 'name',
      key: 'name',
      width: 200
    },
    {
      title: '索引',
      key: 'index',
      width: 70,
      dataIndex: 'index'
    },
    {
      title: '类型',
      key: 'group',
      width: 70,
      scopedSlots: { customRender: 'group' }
    },
    {
      title: '描述',
      key: 'describe',
      dataIndex: 'describe'
    },
    {
      title: '操作',
      width: 180,
      scopedSlots: { customRender: 'action' }
    }
  ];

  types = [
    { name: '文件夹', value: 'FOLDER' },
    { name: '子文件夹', value: 'SUB_FOLDER' },
    { name: '文件', value: 'FILE' }
  ];

  /**
   * 添加按钮点击
   */
  addBtnClick (root: boolean, superModel: any) {
    (this.$refs.WAdd as any).show(root, null, superModel)
  }

  /**
   * 修改按钮点击
   */
  modifyBtnClick (row: any) {
    (this.$refs.WAdd as any).show(row.group, row)
  }

  /**
   * 加载列表数据
   */
  loadList () {
    this.$wAxios
      .$get(Admin.auth.api.all)
      .then((data) => {
        dealWithChildren(data)
        this.models = data
      })
      .catch(() => {})
  }

  /**
   * 删除按钮点击
   */
  removeBtnClick (row: any) {
    if (row.children.length > 0) {
      this.$message.error('必须先删除全部子节点')
      return
    }
    this.$wRemovePop(() => {
      return this.$wAxios.$delete(`${Admin.auth.api.delete}${row._id}`)
    }, row.name).then(() => {
      this.loadList()
    })
  }

  showPage (row: any) {
    (this.$refs.WPagePop as any).show(row)
  }

  showApi (row: any) {
    (this.$refs.WPagePop as any).show(row)
  }
}
</script>

<style scoped></style>
